﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Chapter1.WebForm1" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><%--必须有--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>布局示例</title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" /><%--必须有--%>
    <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout"><%--Layout="FitLayout" 拉伸布局--%>
        <Items>
            <ext:FormPanel runat="server" Frame="true" LabelWidth="40"><%--LabelWidth="40" Label宽40，根据Label文字总宽度手动设定--%>
                <Items>
                    <ext:Container ID="Container1" runat="server" Layout="Column" Height="106" LabelAlign="Left">
                        <Items>
                            <ext:Container ID="Container2" runat="server" ColumnWidth=".5" Layout="FormLayout" LabelWidth="40"><%-- Layout="FormLayout" Form布局,ColumnWidth=".5" 列宽50% --%>
                                <Items>
                                    <ext:TextField runat="server" ID="txtName" FieldLabel="姓名" AnchorHorizontal="95%"/><%--AnchorHorizontal="95%",总体宽95% --%>
                                    <ext:RadioGroup runat="server" ID="rdoSex" FieldLabel="性别">
                                        <Items>
                                            <ext:Radio runat="server" ID="rdoSexMen" BoxLabel="男士" />
                                            <ext:Radio runat="server" ID="rdoSexWoman" BoxLabel="女士" />
                                        </Items>
                                    </ext:RadioGroup>
                                    <ext:NumberField runat="server" ID="numAge" MinValue="1" FieldLabel="年龄" AnchorHorizontal="95%" />
                                    <ext:TextField runat="server" ID="txtEmail" AllowBlank="false" FieldLabel="邮箱" AnchorHorizontal="95%" />
                                </Items>
                            </ext:Container>
                            <ext:Container ID="Container3" runat="server" ColumnWidth=".5" Layout="FormLayout" LabelWidth="40">
                                <Items>
                                    <ext:TextField runat="server" ID="txtCode" FieldLabel="编码" AnchorHorizontal="100%" />
                                    <ext:TextField runat="server" ID="txtTl" FieldLabel="电话" AnchorHorizontal="100%" Disabled="true" />
                                    <ext:ComboBox runat="server" ID="cmbProvince" FieldLabel="省份" AnchorHorizontal="100%" Editable="false" AllowBlank="false" />
                                    <ext:DateField runat="server" ID="dfBirthDay" FieldLabel="生日" AnchorHorizontal="100%" Editable="false" AllowBlank="false" Format="yyyy-MM-dd" />
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:HtmlEditor runat="server" ID="txtIntro" AllowBlank="true" FieldLabel="简介" AnchorHorizontal="100%" AnchorVertical="-106" /><%--AnchorVertical="-106" 缩回了106px,高度=页面总高-106,与Container1的Height对应,也就是此控件上面的总高度 --%>
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
